import React, { useEffect } from 'react'
import { useLocation, Link } from 'react-router-dom';
import './index.scss'
import { Icon } from 'antd-mobile';
function ComponentTabber (props) {
    const { data } = props
    const location = useLocation()
    useEffect(() => {
      console.log(location)
    },[location])
    return (
     <div className="component-tabber jus-b ali-c">
        {
            data.map((item,index) => {
                return <Link to={item.path} className="ali-c flexv component-tabber-li" key={index}>
                    {/* component-tabber-li-title */}
                    <div className={`component-tabber-li-title ${location.pathname === item.path ? 'component-red' : ''}`} >{ item.title }</div>
                    <Icon type={'check-circle'} color={location.pathname === item.path ? 'red' : ''} />
                </Link>
            })
        }
     </div>
    )
}
export default ComponentTabber